<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"  />
		<title>列表组面板和嵌入组件</title>
		<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style>
			.a{
				height: 50px;
				width: 100px;
				border:1px solid #ccc;
				background: #eee;
			}
		</style>
	</head>
	<body style="margin: 100px;"> 
		<ul class="list-group">
			<li class="list-group-item">1、这是首页</li>
			<li class="list-group-item">2、这是第一页<span class="badge">5</span></li>
			<li class="list-group-item">3、这是第二页</li>
			<li class="list-group-item">4、这是第三页</li>
		</ul>
		
		<div class="list-group">
			<a href="#" class="list-group-item">1、这是首页</a>
			<a href="#" class="list-group-item active">2、这是第一页<span class="badge">5</span></li>
			<a href="#" class="list-group-item">3、这是第二页</a>
			<a href="#" class="list-group-item list-group-item-success">4、这是第三页</a>
		</div>
		
		<div class="panel panel-success">
			<div class="panel-heading">
				我是标题区域
			</div>
			<div class="panel-body">
				我是面板容器
			</div>
			<table class="table">
				<tr>
					<th>1</th>
					<th>2</th>
					<th>3</th>
				</tr>
				<tr>
					<td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
			</table>
			<ul class="list-group">
				<li class="list-group-item">1、这是首页</li>
				<li class="list-group-item">2、这是第一页<span class="badge">5</span></li>
				<li class="list-group-item">3、这是第二页</li>
				<li class="list-group-item">4、这是第三页</li>
			</ul>
			<div class="panel-footer">
				我是底部
			</div>
		</div>
		
		
		<script src="jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</body>
	
</html>
